<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="450" height="350"></canvas>

<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings to mimic the hand-drawn feel
    ctx.lineWidth = 2.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    // A font that resembles handwriting
    ctx.font = 'bold 22px "Comic Sans MS", cursive, sans-serif';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    /**
     * Draws a vertical resistor with a zigzag pattern.
     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
     * @param {number} x - The x-coordinate for the resistor's vertical line.
     * @param {number} y1 - The starting y-coordinate.
     * @param {number} y2 - The ending y-coordinate.
     * @param {number} zigWidth - The width of the zigzags.
     * @param {number} numZigs - The number of full V-shapes in the zigzag.
     */
    function drawResistor(ctx, x, y1, y2, zigWidth = 10, numZigs = 4) {
        const totalHeight = y2 - y1;
        const segmentHeight = totalHeight / (2 * numZigs);
        ctx.beginPath();
        ctx.moveTo(x, y1);
        for (let i = 0; i < numZigs; i++) {
            ctx.lineTo(x + zigWidth, y1 + (2 * i + 1) * segmentHeight);
            ctx.lineTo(x, y1 + (2 * i + 2) * segmentHeight);
        }
        ctx.stroke();
    }
    
    // --- Define coordinates ---
    const x_left = 100;
    const x_right = 250;
    const y_top = 50;
    const y_bottom = 280;
    
    // Y-coordinates for the resistor branch
    const y_r1_start = 80;
    const y_junction_A = 140;
    const y_r2_end = 200;

    // Y-coordinates for the voltage source
    const y_vsource_center = (y_top + y_bottom) / 2;
    const y_vsource_top_wire_end = y_vsource_center - 20;
    const y_vsource_bottom_wire_start = y_vsource_center + 20;
    const y_vsource_pos_plate = y_vsource_center - 10;
    const y_vsource_neg_plate = y_vsource_center + 10;

    // --- Draw the main circuit loop ---
    ctx.beginPath();
    // Top wire
    ctx.moveTo(x_left, y_top);
    ctx.lineTo(x_right, y_top);
    // Bottom wire
    ctx.moveTo(x_left, y_bottom);
    ctx.lineTo(x_right, y_bottom);
    // Left wire (top part)
    ctx.moveTo(x_left, y_top);
    ctx.lineTo(x_left, y_vsource_top_wire_end);
    // Left wire (bottom part)
    ctx.moveTo(x_left, y_vsource_bottom_wire_start);
    ctx.lineTo(x_left, y_bottom);
    // Right wire (top part)
    ctx.moveTo(x_right, y_top);
    ctx.lineTo(x_right, y_r1_start);
    // Right wire (bottom part)
    ctx.moveTo(x_right, y_r2_end);
    ctx.lineTo(x_right, y_bottom);
    ctx.stroke();

    // --- Draw Voltage Source ---
    ctx.beginPath();
    // Positive plate (longer)
    ctx.moveTo(x_left - 15, y_vsource_pos_plate);
    ctx.lineTo(x_left + 15, y_vsource_pos_plate);
    // Negative plate (shorter)
    ctx.moveTo(x_left - 8, y_vsource_neg_plate);
    ctx.lineTo(x_left + 8, y_vsource_neg_plate);
    ctx.stroke();
    
    // Voltage Source Labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('15 V', x_left - 50, y_vsource_center);
    ctx.font = 'bold 28px "Comic Sans MS", cursive, sans-serif';
    ctx.fillText('+', x_left + 28, y_vsource_pos_plate - 3);
    ctx.fillText('-', x_left + 28, y_vsource_neg_plate + 3);
    ctx.font = 'bold 22px "Comic Sans MS", cursive, sans-serif'; // Reset font

    // --- Draw Resistors ---
    // 24 Ohm Resistor
    drawResistor(ctx, x_right, y_r1_start, y_junction_A);
    // 6 Ohm Resistor
    drawResistor(ctx, x_right, y_junction_A, y_r2_end);

    // Resistor Labels
    ctx.textAlign = 'left';
    ctx.fillText('24 \u03A9', x_right + 20, (y_r1_start + y_junction_A) / 2);
    ctx.fillText('6 \u03A9', x_right + 20, (y_junction_A + y_r2_end) / 2);

    // --- Draw Terminals A and B ---
    const terminal_len = 80;
    const terminal_end_x = x_right + terminal_len;
    // Terminal A
    ctx.beginPath();
    ctx.moveTo(x_right, y_junction_A);
    ctx.lineTo(terminal_end_x, y_junction_A);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(terminal_end_x, y_junction_A, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('A', terminal_end_x + 15, y_junction_A);

    // Terminal B
    ctx.beginPath();
    ctx.moveTo(x_right, y_bottom);
    ctx.lineTo(terminal_end_x, y_bottom);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(terminal_end_x, y_bottom, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('B', terminal_end_x + 15, y_bottom);
    
    // --- Draw Caption ---
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 3.3', (x_left + x_right) / 2 + 10, y_bottom + 40);

</script>
</body>
</html>